import { ChangeDetectionStrategy, Component } from '@angular/core';
import { MenuItem } from '@iux/live';

const Menus: MenuItem[] = [
  {
    id: '1',
    label: 'Menu 01',
    icon: 'icon-menu-home',
    items: [
      {
        id: 'group1',
        label: 'Group 1',
        items: [
          { id: '11', label: 'Item 1' },
          { id: '12', label: 'Item 2 long menu text Host-Based Intrusion Detection Service' },
        ],
        type: 'group',
      },
      {
        id: 'group2',
        label: 'Group 2',
        items: [
          { id: '13', label: 'Item 3' },
          { id: '14', label: 'Item 4' },
        ],
        type: 'group',
      },
      {
        id: 'group3',
        label: 'Group 3',
        items: [
          { id: '15', label: 'Item 5' },
          { id: '16', label: 'Item 6' },
        ],
        type: 'group',
      },
    ],
  },
  {
    id: '2',
    label: 'Menu 02',
    icon: 'icon-menu-host',
  },
  {
    id: '3',
    label: 'Menu 03',
    icon: 'icon-menu-resource',
    disabled: true,
    tips: 'Disabled',
    items: [
      {
        id: '31',
        label: 'Item 7',
      },
      {
        id: '32',
        label: 'Item 8',
      },
    ],
  },
  {
    id: '4',
    label: 'Menu 04',
    icon: 'icon-menu-setting',
    items: [
      {
        id: '41',
        label: 'Item 9',
      },
      {
        id: '42',
        label: 'Item 10',
      },
    ],
  },
];

@Component({
  templateUrl: './theme.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ThemeComponent {
  disabled = true;
  menus: MenuItem[] = Menus;
  active = '12';
  theme = 'dark';

  themeChange() {
    this.theme = this.theme === 'light' ? 'dark' : 'light';
  }
}
